<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>ForgetPass</title>
        <link href="/css/styles.css" rel="stylesheet" />
        <link rel="icon" href="/assets/img/logo.ico" type="image/x-icon"/>
        <link rel="bookmark" href="/assets/img/logo.ico" type="image/x-icon"/>
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body class="bg-primary">
        <div id="layoutAuthentication">
            <div id="layoutAuthentication_content">
                <main>
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-5">
                                <div class="card shadow-lg border-0 rounded-lg mt-5">
                                    <div class="card-header"><h3 class="text-center font-weight-light my-4">找回密码</h3></div>
                                    <div class="card-body">
                                        <div class="small mb-3 text-muted">输入您的电子邮件地址，我们将向您发送一个验证码以重置您的密码</div>
                                        <form action="/reader/forgetPass" method="post">
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inputreadId" required type="text" placeholder="readId" name="readId" onblur="checkExist()"/>
                                                <label for="inputreadId">readId</label>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <div class="form-floating mb-3 mb-md-0">
                                                        <input class="form-control" id="inputEmail" required type="email" placeholder="name@example.com" name="readMail"/>
                                                        <label for="inputEmail">Email address</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-floating mb-3 mb-md-0" style="text-align: center;line-height: 55px">
                                                        <button type="button" id="getCaptcha" class="btn btn-primary" onclick="GetCaptcha()">发送验证码</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inputCaptcha" required type="text" placeholder="Captcha" name="captcha"/>
                                                <label for="inputCaptcha">Captcha</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inputNewPass" required type="password" placeholder="inputNewPass" name="newPass"/>
                                                <label for="inputNewPass">NewPass</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inputAgain" required type="password" placeholder="inputAgain" name="againNewPass"/>
                                                <label for="inputAgain">AgainNewPass</label>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                                                <a class="small" href="/reader/loginHtml">返回登陆</a>
                                                <input class="btn btn-primary" id="reset-button" type="submit" value="重置密码" />
                                            </div>
                                        </form>
                                    </div>
                                    <div class="card-footer text-center py-3">
                                        <div class="small"><a href="/reader/registerHtml">需要帐户？登记！</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
            <div id="layoutAuthentication_footer">
                <footer class="py-4 bg-light mt-auto">
                    <div class="container-fluid px-4">
                        <div class="d-flex align-items-center justify-content-between small">
                            <div class="text-muted">Copyright &copy; Your Website 2024</div>
                            <div>
                                <a href="#">隐私政策</a>
                                &middot;
                                <a href="#">条款和条件</a>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="/js/scripts.js"></script>
        <script src="/js/forgetPass.js"></script>
    </body>
</html>
